<template>
    <div class="base_list_container">
        <template v-if="!paramsData.hideHeader">
            <header-template slot="header" ref="BaseListHeader" class="buttons"
                             :toolbar_buttons="headerOption.toolbar_buttons"
                             :toolbar_filter="headerOption.toolbar_filter"
                             :searchForm="searchForm"
                             :isSearchInput="false"
                             :isSearchBtn="false"
                             @event="handleHeaderEvent">
                <template slot="toolbar_buttons" style="margin: 5px 0;"
                          v-if="!$utils.isNotEmptyList(headerOption.toolbar_buttons)">
                    <span>&nbsp;</span>
                </template>
            </header-template>
        </template>
        <vxeTableTemplate :data="dataList" :options.sync="tableOptions" @event="handleTableEvent"/>
    </div>
</template>

<script>
export default {
    name: "BaseListContainer",
    props: {
        propsData: {
            type: Object,
            default() {
                return {
                    init: true,
                };
            },
        },
    },
    data() {
        return {
            searchForm: {},
            paramsData: {},
            headerOption: {
                toolbar_buttons: [],
                toolbar_filter: [],
            },
            selectionList: [],
            dataList: [],
            tableOptions: {
                ref: 'baseListContainerTable',
                columns: [],
                pagination: {
                    pageIndex: 1,
                    pageSize: window.configs.pageSize,
                },
                getMaxHeight() {
                    return $(document).height() * 0.8 - 250;
                },
            },
        };
    },
    watch: {
        propsData: {
            handler() {
                this.init();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        closeDialog() {
            this.$emit('event', 'closeDialog');
        },
        handleHeaderEvent(event) {
            let _this = this;
            _this.queryData = $.extend({}, _this.queryData, event.searchForm);
            if (event.type === 'search') {
                _this.getList(true)
            } else if (event.type === 'refresh') {
                _this.getList(true)
            }
        },

        async init() {
            let _this = this;
            if (_this.propsData.init) {
                return;
            }
            if (_this.propsData.headerOption) {
                _this.headerOption = $.extend({}, _this.propsData.headerOption);
            }
            _this.paramsData = $.extend({}, _this.propsData);
            if (_this.paramsData.simple) {
                _this.initTableOptions();
                _this.dataList = (_this.paramsData.dataList || []).map(item => $.extend({}, item));
                return;
            }
            if (!_this.$utils.isNotEmpty(_this.paramsData.list_url)) {
                _this.$emit('event', 'closeDialog');
                _this.$message.error('缺少配置：list_url');
                return;
            }
            if (!_this.paramsData.tableOptions) {
                _this.$emit('event', 'closeDialog');
                _this.$message.error('缺少配置：tableOptions');
                return;
            }
            _this.initTableOptions();
            await _this.getList(true);
        },

        initTableOptions() {
            let _this = this;
            if (!_this.paramsData.tableOptions) {
                return;
            }
            _this.tableOptions = $.extend({}, _this.tableOptions, _this.paramsData.tableOptions);
        },

        getList(search) {
            let _this = this;
            if (search) {
                _this.tableOptions = _this.resetTablePagination(_this.tableOptions);
            }
            _this.dataList = [];
            let queryData = _this.getQueryParams(_this.tableOptions, _this.paramsData.query);
            queryData = $.extend({}, queryData, _this.searchForm);
            return _this.$store.dispatch('fetchData', {
                url: _this.paramsData.list_url,
                data: queryData,
            }).then(result => {
                _this.dataList = result.data || [];
                _this.tableOptions = _this.setTableTotal(_this.tableOptions, result);
            }).catch(() => {
            });
        },

        handleTableEvent(event) {
            if (event.type === 'page') {
                this.getList();
                return;
            }
            if (event.type === 'selectionChange') {
                this.selectionList = event.value;
                this.$emit('event', {
                    type: 'selectionChange',
                    value: event.value,
                });
            }
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.base_list_container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
